<template>
  <div style="height: 500px" class="-mt-4">
    <vue3-tree-org
      :data="tree"
      :horizontal="true"
      :collapsable="false"
      :tool-bar="false"
      :scalable="true"
      :node-draggable="false"
      :label-style="{ minWidth: '100px' }"
    />
  </div>
</template>
  <script lang="ts">
import { defineComponent } from 'vue';
import { defHttp } from '/@/utils/http/axios';
import { useRoute } from 'vue-router';

export default defineComponent({
  data() {
    return {
      tree: {},
    };
  },
  created() {
    this.getTopo();
  },
  methods: {
    getTopo() {
      const route = useRoute();

      defHttp.get({ url: `/project/get-sensor-topo?id=${route.params.id}` }).then((res) => {
        const { id, name, dtuTopoList } = res.data;
        let arr = dtuTopoList.map((item) => {
          item.children = item.gatherDeviceList.map((item2) => {
            item2.children = item2.sensorList.map((item3) => {
              return {
                ...item3,
                label: item3.no,
                disabled: true,
              };
            });

            // forms.value.push(item2);
            return {
              ...item2,
              pid: item2.dtuId,
              label: item2.name,
              disabled: true,
            };
          });

          return {
            ...item,
            label: item.name,
            disabled: true,
          };
        });

        this.tree = {
          id,
          label: name,
          children: arr,
        };
      });
    },
  },
});
</script>
  <style lang="less" scoped>
.tree-org-node__text {
  text-align: left;
  font-size: 14px;
  .custom-content {
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid currentColor;
  }
}
</style>
  